<template>
  <div class="app-container">
    <div class="layout-content">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>
    </div>
    <div class="layout-footer">
      <TabBar :data="tabbars" @change="handleChange"/>
    </div>
    <floatMenu class="float-menu" />
    <tipDialog/>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import floatMenu from './floatMenu'
import tipDialog from '@/components/tipDialog'

export default {
  name: 'AppLayout',
  data() {
    return {
      tabbars: [
        {
          title: '预定订单',
          to: {
            path: '/home'
          },
          icon: 'shop-collect-o'
        },
        {
          title: '订单记录',
          to: {
            path: '/about'
          },
          icon: 'balance-list-o'
        }
      ],
      router: ''
    }
  },
  mounted() {
    // this.router = window.location.href
  },
  components: {
    TabBar,
    floatMenu,
    tipDialog
  },
  methods: {
    handleChange(value) {
      // console.log(value)
      this.tabbars[value].to.query = this.$route.query
    }
  }
}
</script>
<style lang="scss" scoped>
.float-menu {
  position: fixed;
  bottom: 120px;
  right: 20px;
  z-index: 9999;
}

</style>
